<!doctype html>
<html lang="en">

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="/static/img/logo/favicon.ico" />
        <link rel="stylesheet" href="/static/assets/plugins/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/footer.css">
        <link rel="stylesheet" href="/static/css/header.css">

        <title>论坛</title>

</head>

<body>
        {% include 'header.html' %}

        <div class="container main-container">
                <div class=" pb-3 border-bottom mb-3">
                        <!-- 筛选条件-->
                        <ul class="list-group list-group-horizontal">
                                <li class="list-group-item">帖子分类</li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-0-{{ reply_limit }}-{{ time_limit }}"
                                                style="text-decoration:none">全部</a></li>
                                {% for k in kinds %}
                                {% if kid == k.id %}
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ k.id }}-{{ reply_limit }}-{{ time_limit }}"
                                                style="text-decoration:none">{{ k.k_name }}</a></li>
                                {% else %}
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ k.id }}-{{ reply_limit }}-{{ time_limit }}"
                                                style="text-decoration:none">{{ k.k_name }}</a></li>
                                {% endif %}
                                {% endfor %}
                        </ul>
                        <ul class="list-group list-group-horizontal ">
                                <li class="list-group-item">回复数量</li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-0-{{ time_limit }}"
                                                style="text-decoration:none">全部</a></li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-1-{{ time_limit }}"
                                                style="text-decoration:none">大于100</a></li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-2-{{ time_limit }}"
                                                style="text-decoration:none">30-100</a></li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-3-{{ time_limit }}"
                                                style="text-decoration:none">低于30</a></li>
                        </ul>
                        <ul class="list-group list-group-horizontal">
                                <li class="list-group-item">发布时间</li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-{{ reply_limit }}-0"
                                                style="text-decoration:none">全部</a></li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-{{ reply_limit }}-1"
                                                style="text-decoration:none">一个月内</a></li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-{{ reply_limit }}-2"
                                                style="text-decoration:none">3个月内</a></li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-{{ reply_limit }}-3"
                                                style="text-decoration:none">6个月内</a></li>
                                <li class="list-group-item"><a class="text-secondary"
                                                href="/all-{{ kid }}-{{ reply_limit }}-4"
                                                style="text-decoration:none">1年内</a></li>
                        </ul>

                </div>




                <div class="row mb-2">
                        {% for t in topics %}
                        <div class="col-md-6">
                                <div
                                        class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                                        <div class="col p-4 pb-2 d-flex flex-column position-static">
                                                <!-- <strong class="d-inline-block mb-2 text-success">{{ t.t_kind }}</strong> -->
                                                <h3 class="mb-0">{{ t.t_title }}</h3>
                                                <div class="mb-1 text-muted">{{ t.t_uid }}</div>
                                                <p class="mb-auto">{{ t.t_introduce }}</p>
                                                <p class="mb-0">
                                                        {% if t.t_like_type == 'no' %}
                                                        <img iddd="{{ t.id }}" alt="+1" style="width: 20px;"
                                                                class="like" src="/static/img/logo/hand-thumbs-up.svg">
                                                        <span class="reactions-count ">{{t.t_like}}</span>
                                                        <img iddd="{{ t.id }}" alt="-1" style="width: 20px;"
                                                                class="dislike"
                                                                src="/static/img/logo/hand-thumbs-down.svg">
                                                        <span class="reactions-count ">{{t.t_dislike}}</span>
                                                        {% elif t.t_like_type %}
                                                        <img iddd="{{ t.id }}" alt="+1" style="width: 20px;"
                                                                class="like"
                                                                src="/static/img/logo/hand-thumbs-up-fill.svg">
                                                        <span class="reactions-count ">{{t.t_like}}</span>
                                                        <img iddd="{{t.id}}" alt="-1" style="width: 20px;"
                                                                class="dislike"
                                                                src="/static/img/logo/hand-thumbs-down.svg">
                                                        <span class="reactions-count ">{{t.t_dislike}}</span>
                                                        {% else %}
                                                        <img iddd="{{ t.id }}" alt="+1" style="width: 20px;"
                                                                class="like" src="/static/img/logo/hand-thumbs-up.svg">
                                                        <span class="reactions-count ">{{t.t_like}}</span>
                                                        <img iddd="{{ t.id }}" alt="-1" style="width: 20px;"
                                                                class="dislike"
                                                                src="/static/img/logo/hand-thumbs-down-fill.svg">
                                                        <span class="reactions-count ">{{t.t_dislike}}</span>
                                                        {% endif %}
                                                </p>

                                                <a href="/single/{{ t.id }}" class=" mt-1 text-secondary">继续阅读</a>
                                        </div>
                                        <!-- <div class="col-auto d-none d-lg-block">
                                                <img class="img-fluid img-thumbnail" width="200" height="250"
                                                        src="{{ t.t_photo }}" alt="" style="height: 200px;">

                                        </div> -->
                                </div>
                        </div>
                        {% endfor %}
                </div>
        </div>


        {% include 'footer.html' %}
        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script>
                $(document).ready(function () {
                        $("li > a").hover(function () {
                                $(this).addClass('text-dark');
                        }, function () {
                                $(this).removeClass('text-dark');
                        });

                        $('.like').click(function () {

                                var tid = $(this).attr("iddd");
                                $.ajax({
                                        url: '/like/',
                                        type: "POST",
                                        data: {
                                                'like': 'like',
                                                'tid': tid
                                        },
                                        beforeSend: function (xhr,
                                                settings) {
                                                xhr.setRequestHeader(
                                                        "X-CSRFToken",
                                                        "{{ csrf_token }}"
                                                        ); // csrf
                                        },
                                        success: function (data) {
                                                if (data
                                                        .result) {
                                                        var n = $(
                                                                        this)
                                                                .next()
                                                                .html();
                                                        $(this).next()
                                                                .html(Number(
                                                                                n) +
                                                                        1
                                                                        );
                                                        $(this).attr("src",
                                                                "/static/img/logo/hand-thumbs-up-fill.svg"
                                                                );
                                                } else {
                                                        alert(data
                                                                .msg)
                                                }
                                        }.bind(this)
                                });
                        });
                        $('.dislike').click(function () {

                                var tid = $(this).attr("iddd");
                                $.ajax({
                                        url: '/like/',
                                        type: "POST",
                                        data: {
                                                'like': 'dislike',
                                                'tid': tid
                                        },
                                        beforeSend: function (xhr,
                                                settings) {
                                                xhr.setRequestHeader(
                                                        "X-CSRFToken",
                                                        "{{ csrf_token }}"
                                                        ); // csrf
                                        },
                                        success: function (data) {
                                                if (data
                                                        .result) {
                                                        var n = $(
                                                                        this)
                                                                .next()
                                                                .html();
                                                        $(this).next()
                                                                .html(Number(
                                                                                n) +
                                                                        1
                                                                        );
                                                        $(this).attr("src",
                                                                "/static/img/logo/hand-thumbs-down-fill.svg"
                                                                );
                                                } else {
                                                        alert(data
                                                                .msg)
                                                }
                                        }.bind(this)
                                });
                        });


                });
        </script>
</body>

</html>